<template>
  <div>
        <!-- 面包屑导航 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item>医院管理</el-breadcrumb-item>
      <el-breadcrumb-item>医院列表</el-breadcrumb-item>
      <el-breadcrumb-item>修改医院信息</el-breadcrumb-item>
    </el-breadcrumb>
    <el-divider></el-divider>

    <!-- 修改医院的表单 -->
    <el-form 
      ref="form" :model="form" :rules="rules"
      label-width="120px" style="width: 600px;">
      <el-form-item label="封面图片" prop="h_cover">
        <el-upload
          class="avatar-uploader"
          :action="`${UPLOADURL}/upload`"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
        >
          <img v-if="form.h_cover" :src="form.h_cover" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
      <el-form-item label="医院名称" prop="h_name">
        <el-input v-model="form.h_name"></el-input>
      </el-form-item>
      <el-form-item label="医院等级" prop="h_order">
        <el-input v-model="form.h_order" type="text"></el-input>
      </el-form-item>
      <el-form-item label="医院所在省份" prop="h_province">
        <el-input v-model="form.h_province"></el-input>
      </el-form-item>
      <el-form-item label="医院所在城市" prop="h_city">
        <el-input v-model="form.h_city"></el-input>
      </el-form-item>
      <el-form-item label="医院详细地址" prop="h_address">
        <el-input v-model="form.h_address"></el-input>
      </el-form-item>
      <el-form-item label="医院介绍" prop="h_introduce">
        <el-input type="textarea" :rows="2" v-model="form.h_introduce"></el-input>
      </el-form-item>
      <el-form-item label="医院电话" prop="h_phone">
        <el-input v-model="form.h_phone" type="text"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submit">立即更新</el-button>
        <el-button>取消</el-button> 
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import httpApi from '@/http';
  export default {
    data() {
      return {
        textarea: '',
        form:{
          h_id:this.$route.params.id, // 医院id
          h_name:'',
          h_cover:'',
          h_order:'',
          h_province:'',
          h_city:'',
          h_address:'',
          h_introduce:'',
          h_phone:'',
        },
        rules: {
        h_id: [{required:true, message:'该字段不能为空', trigger:'blur'}], 
        h_name: [{required:true, message:'该字段不能为空', trigger:'blur'}],
        h_cover: [{required:true, message:'该字段不能为空', trigger:'blur'}],
        // h_order: [{required:true, message:'该字段不能为空', trigger:'change'}],
        h_city: [{required:true, message:'该字段不能为空', trigger:'blur'}],
        h_address: [{required:true, message:'该字段不能为空', trigger:'blur'}],
        h_introduce: [{required:true, message:'该字段不能为空', trigger:'blur'}],
        h_phone: [{required:true, message:'该字段不能为空', trigger:'blur'}]
      },
      }
    },
    methods: {
      // 修改医院信息
      submit(){
        this.$refs["form"].validate((valid) => {
        if (valid) {
          // 若表单数据收集完成,发送修改请求即可
          httpApi.hospitalApi.update(this.form).then(res =>{
          console.log('修改医院',res);
          if(res.data.code == 200){
            this.$message.success('修改成功')
            // 跳转到列表
            this.$router.push('/home/hospital-list')
          }
        })
        }
      });
      },
      queryById() {
        let params = {h_id:this.form.h_id}
        httpApi.hospitalApi.queryById(params).then(res =>{
          console.log('醫院信息',res);
          this.form = res.data.data[0]
        })
      },
      /** 上传成功后执行 */
    handleAvatarSuccess(res, fileh_) {
      console.log(res);
      this.form.h_cover = res.data
    },

    /** 上传之前完成图片格式的验证 */
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    },
    mounted(){
      this.queryById()
    }
  }
</script>

<style lang="scss" scoped>

</style>
<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 120px;
  line-height: 120px;
  text-align: center;
}
.avatar {
  width: 120px;
  display: block;
}
</style>